<div class="tableInputDialog">

	<div dojoType="dijit.layout.BorderContainer" class="dijitDialogPaneContentArea" design="headline" gutters="false" 
		style="width:{width}; height:{height}" liveSplitters="false" id="tableInputBorderContainer">
	
		<!--Center region -->
		<div dojoType="dijit.layout.ContentPane" region="center" class="propertiesRegion">
			<table width="100%">
				<tr class="sectionHeaderRow">
					<td class="sectionHeaderCell">{propertiesHeader}</td>
				</tr>
				<tr>
					<td style="padding-right:4px;">
						<table width="100%" cellspacing="5">
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputNumRows">{numRows}</label></td>
								<td>
									<input id="tableInputNumRows" data-dojo-type="dijit.form.NumberSpinner" value="2" class="propertyInputWidget"/>
								</td>
							</tr>
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputNumCols">{numCols}</label></td>
								<td>
									<input id="tableInputNumCols" data-dojo-type="dijit.form.NumberSpinner" value="2" class="propertyInputWidget"/>
								</td>
							</tr>
							<!--  It turns out document.css messes up cellpadding/cellspacing on tables, so get rid of for now...
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputCellpadding">{cellpadding}</label></td>
								<td>
									<input id="tableInputCellpadding" data-dojo-type="dijit.form.NumberSpinner" value="0" class="propertyInputWidget"/>
								</td>
							</tr>
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputCellspacing">{cellspacing}</label></td>
								<td>
									<input id="tableInputCellspacing" data-dojo-type="dijit.form.NumberSpinner" value="0" class="propertyInputWidget"/>
								</td>
							</tr>
							-->
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputBorder">{border}</label></td>
								<td>
									<input id="tableInputBorder" data-dojo-type="dijit.form.NumberSpinner" value="0" class="propertyInputWidget"/>
								</td>
							</tr>
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputBorderCollapse">{borderCollapse}</label></td>
								<td>
									<select id="tableInputBorderCollapse" data-dojo-type="dijit.form.Select" type="text" value="collapse" style="width:100%">
										<option value="collapse" selected="selected">collapse</option>
									   	<option value="separate">separate</option>
									   	<option value="inherit">inherit</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputTableLayout">{tableLayout}</label></td>
								<td>
									<select id="tableInputTableLayout" data-dojo-type="dijit.form.Select" type="text" value="auto" style="width:100%">
										<option value="auto" selected="selected">auto</option>
									   	<option value="fixed">fixed</option>
									   	<option value="inherit">inherit</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="propertyFieldLabel"><label for="tableInputFirstRowHeader">{firstRowHeader}</label></td>
								<td>
									<input id="tableInputFirstRowHeader" type="checkbox" data-dojo-type="dijit.form.CheckBox"></input>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
        </div>
		
        <!--Preview area -- "trailing" region -->
		<div dojoType="dijit.layout.ContentPane" id="tableInputPreviewRegion" region="trailing" class="previewRegion" >
			<table width="100%">
				<tr class="sectionHeaderRow">
					<td class="sectionHeaderCell">{preview}</td>
				</tr>
				<!--  child rows for rules and rule labels added dynamically -->
				<tr>
					<td>
						<div dojoType="dijit.layout.ContentPane" id="tableInputPreviewArea" class="previewArea"/> 
					</td>
				</tr>
			</table>
    </div>
  </div>
  <div class="dijitDialogPaneActionBar">
		<button data-dojo-type="dijit.form.Button" id="tableInputOkButton" type="submit">{buttonOk}</button>
		<button data-dojo-type="dijit.form.Button" id="tableInputCancelButton">{buttonCancel}</button>
	</div>
</div>